<template>
  <div v-loading="loading" class="add-edit-wrap">
    <el-form
      :model="detailInfo"
      :rules="rules"
      ref="detailInfoFormRef"
      label-width="100px"
    >
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="detailInfo.name"
          :maxlength="20"
          class="custom-input"
          clearable
          placeholder="请输入球员姓名"
        ></el-input>
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input
          v-model="detailInfo.age"
          v-interage
          clearable
          class="custom-input"
          placeholder="请输入球员年龄"
        >
          <template slot="append">岁</template></el-input
        >
      </el-form-item>

      <el-form-item label="身高" prop="height">
        <el-input
          v-model="detailInfo.height"
          clearable
          class="custom-input"
          placeholder="请输入球员身高"
          ><template slot="append">CM</template></el-input
        >
      </el-form-item>

      <el-form-item label="体重" prop="weight">
        <el-input
          v-model="detailInfo.weight"
          clearable
          class="custom-input"
          placeholder="请输入球员体重"
          ><template slot="append">KG</template></el-input
        >
      </el-form-item>

      <el-form-item label="球衣号码" prop="clothNumber">
        <el-input
          v-model="detailInfo.clothNumber"
          v-interage
          clearable
          class="custom-input"
          placeholder="请输入球员球衣号码"
          ><template slot="append">号</template></el-input
        >
      </el-form-item>

      <el-form-item prop="position" label="位置">
        <el-select
          v-model="detailInfo.position"
          class="custom-input"
          clearable
          placeholder="请选择球员位置"
          @change="handlePositionChange"
        >
          <el-option
            v-for="(value, key) in PLAYER_POSITION"
            :key="key"
            :value="key"
            :label="value"
          ></el-option>
        </el-select>
      </el-form-item>

      <template v-if="Number(detailInfo.position) === 4000">
        <el-form-item label="手抛球分" prop="handballScore">
          <el-input
            v-model="detailInfo.handballScore"
            v-interage
            clearable
            class="custom-input"
            placeholder="请输入球员手抛球分"
            ><template slot="append">分</template></el-input
          >
        </el-form-item>
        <el-form-item label="任意球分" prop="freeKickScore">
          <el-input
            v-model="detailInfo.freeKickScore"
            v-interage
            clearable
            class="custom-input"
            placeholder="请输入球员任意球分"
            ><template slot="append">分</template></el-input
          >
        </el-form-item>
        <el-form-item label="远射分" prop="dribbleScore">
          <el-input
            v-model="detailInfo.dribbleScore"
            v-interage
            clearable
            class="custom-input"
            placeholder="请输入球员远射分"
            ><template slot="append">分</template></el-input
          >
        </el-form-item>
        <el-form-item label="近距离分" prop="closeRangeScore">
          <el-input
            v-model="detailInfo.closeRangeScore"
            v-interage
            clearable
            class="custom-input"
            placeholder="请输入球员近距离分"
            ><template slot="append">分</template></el-input
          >
        </el-form-item>
        <el-form-item label="点球分" prop="penaltyScore">
          <el-input
            v-model="detailInfo.penaltyScore"
            v-interage
            clearable
            class="custom-input"
            placeholder="请输入球员点球分"
            ><template slot="append">分</template></el-input
          >
        </el-form-item>
        <el-form-item label="反应分" prop="reactiveScore">
          <el-input
            v-model="detailInfo.reactiveScore"
            v-interage
            clearable
            class="custom-input"
            placeholder="请输入球员反应分"
            ><template slot="append">分</template></el-input
          >
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item label="进攻分" prop="attackScore">
          <el-input
            v-model="detailInfo.attackScore"
            v-interage
            clearable
            class="custom-input"
            placeholder="请输入球员进攻分"
            ><template slot="append">分</template></el-input
          >
        </el-form-item>
        <el-form-item label="对抗分" prop="resistScore">
          <el-input
            v-model="detailInfo.resistScore"
            v-interage
            clearable
            class="custom-input"
            placeholder="请输入球员对抗分"
            ><template slot="append">分</template></el-input
          >
        </el-form-item>
        <el-form-item label="速度分" prop="speedScore">
          <el-input
            v-model="detailInfo.speedScore"
            v-interage
            clearable
            class="custom-input"
            placeholder="请输入球员速度分"
            ><template slot="append">分</template></el-input
          >
        </el-form-item>
        <el-form-item label="盘带分" prop="dribblingScore">
          <el-input
            v-model="detailInfo.dribblingScore"
            v-interage
            clearable
            class="custom-input"
            placeholder="请输入球员盘带分"
            ><template slot="append">分</template></el-input
          >
        </el-form-item>
        <el-form-item label="力量分" prop="powerScore">
          <el-input
            v-model="detailInfo.powerScore"
            v-interage
            clearable
            class="custom-input"
            placeholder="请输入球员力量分"
            ><template slot="append">分</template></el-input
          >
        </el-form-item>
        <el-form-item label="防守分" prop="defendScore">
          <el-input
            v-model="detailInfo.defendScore"
            v-interage
            clearable
            class="custom-input"
            placeholder="请输入球员防守分"
            ><template slot="append">分</template></el-input
          >
        </el-form-item>
      </template>
      <el-form-item label="签约价格" prop="price">
        <el-input
          v-model="detailInfo.price"
          clearable
          class="custom-input"
          placeholder="请输入球员签约价格"
          ><template slot="append">万元</template></el-input
        >
      </el-form-item>
      <el-form-item v-if="type === 'add'">
        <el-button type="primary" @click="handleAddPLayer"
          >立即新增球员</el-button
        >
        <el-button @click="handleReset('add')">重置</el-button>
      </el-form-item>
      <el-form-item v-if="type === 'edit'">
        <el-button type="primary" @click="handleEditPlayer">提交修改</el-button>
        <el-button @click="handleReset('edit')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  fetchPlayerDetailData,
  fetchPlayerAdd,
  fetchPlayerEdit,
} from "@/api/player/index";
import { PLAYER_POSITION } from "./constants/index";
export default {
  name: "add-edit-player",
  data() {
    const validateScore = (rule, value, callback) => {
      console.log(rule);
      if (!value) {
        callback();
      }
      if (value < 0 || value > 100) {
        callback(new Error("分数范围为0-100"));
      } else {
        callback();
      }
    };
    return {
      PLAYER_POSITION,
      loading: false,
      detailInfo: {
        name: "",
        age: "",
        height: "",
        weight: "",
        price: "",
        position: "",
        clothNumber: "",
        // 非守门员字段
        attackScore: 0, // 进攻分
        resistScore: 0, // 对抗分
        speedScore: 0, // 速度分
        dribblingScore: 0, // 盘带分,
        powerScore: 0, // 力量分
        defendScore: 0, // 防守分
        // 守门员字段
        handballScore: 0, // 手抛球分
        freeKickScore: 0, // 任意球分
        dribbleScore: 0, // 远射分
        closeRangeScore: 0, // 近距离分
        penaltyScore: 0, // 点球分
        reactiveScore: 0, // 反应分
      },
      rules: {
        name: [{ required: true, message: "请输入球员姓名", trigger: "blur" }],
        age: [{ required: true, message: "请输入球员年龄", trigger: "blur" }],
        height: [
          { required: true, message: "请输入球员身高", trigger: "blur" },
        ],
        weight: [
          { required: true, message: "请输入球员体重", trigger: "blur" },
        ],
        price: [
          { required: true, message: "请输入球员签约价格", trigger: "blur" },
        ],
        clothNumber: [
          { required: true, message: "请输入球员球衣号码", trigger: "blur" },
        ],
        position: [
          { required: true, message: "请选择球员位置", trigger: "change" },
        ],
        attackScore: [
          { required: true, message: "请输入球员进攻分", trigger: "blur" },
          { validator: validateScore, trigger: "blur" },
        ],
        resistScore: [
          { required: true, message: "请输入球员对抗分", trigger: "blur" },
          { validator: validateScore, trigger: "blur" },
        ],
        speedScore: [
          { required: true, message: "请输入球员速度分", trigger: "blur" },
          { validator: validateScore, trigger: "blur" },
        ],
        dribblingScore: [
          { required: true, message: "请输入球员盘带分", trigger: "blur" },
          { validator: validateScore, trigger: "blur" },
        ],
        powerScore: [
          { required: true, message: "请输入球员力量分", trigger: "blur" },
          { validator: validateScore, trigger: "blur" },
        ],
        defendScore: [
          { required: true, message: "请输入球员防守分", trigger: "blur" },
          { validator: validateScore, trigger: "blur" },
        ],
        handballScore: [
          { required: true, message: "请输入球员手抛球分", trigger: "blur" },
          { validator: validateScore, trigger: "blur" },
        ],
        freeKickScore: [
          { required: true, message: "请输入球员任意球分", trigger: "blur" },
          { validator: validateScore, trigger: "blur" },
        ],
        dribbleScore: [
          { required: true, message: "请输入球员远射分", trigger: "blur" },
          { validator: validateScore, trigger: "blur" },
        ],
        closeRangeScore: [
          { required: true, message: "请输入球员近距离分", trigger: "blur" },
          { validator: validateScore, trigger: "blur" },
        ],
        penaltyScore: [
          { required: true, message: "请输入球员点球分", trigger: "blur" },
          { validator: validateScore, trigger: "blur" },
        ],
        reactiveScore: [
          { required: true, message: "请输入球员反应分", trigger: "blur" },
          { validator: validateScore, trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    type() {
      return this.$route?.query?.type || "add";
    },
    id() {
      return this.$route?.query?.id || null;
    },
  },
  created() {
    if (this.type === "edit") {
      this.requestPlayerDetailData();
    }
  },
  methods: {
    /**
     * 位置change
     */
    handlePositionChange(val) {
      if (Number(val) === 4000) {
        this.detailInfo.attackScore = 0;
        this.detailInfo.resistScore = 0;
        this.detailInfo.speedScore = 0;
        this.detailInfo.dribblingScore = 0;
        this.detailInfo.powerScore = 0;
        this.detailInfo.defendScore = 0;
      } else {
        this.detailInfo.handballScore = 0;
        this.detailInfo.freeKickScore = 0;
        this.detailInfo.dribbleScore = 0;
        this.detailInfo.closeRangeScore = 0;
        this.detailInfo.penaltyScore = 0;
        this.detailInfo.reactiveScore = 0;
      }
      this.$refs.detailInfoFormRef.clearValidate();
    },
    /**
     * 重置
     */
    handleReset(type) {
      if (type === "add") {
        this.detailInfo = this.$options.data().detailInfo;
      } else {
        this.requestPlayerDetailData();
      }
      this.$refs.detailInfoFormRef.clearValidate();
    },
    handleAddPLayer() {
      this.$refs.detailInfoFormRef.validate((valid) => {
        if (valid) {
          this.requestPlayerAdd();
        } else {
          return false;
        }
      });
    },
    handleEditPlayer() {
      this.$refs.detailInfoFormRef.validate((valid) => {
        if (valid) {
          this.requestPlayerEdit();
        } else {
          return false;
        }
      });
    },
    /**
     * 请求详情
     */
    requestPlayerDetailData() {
      this.loading = true;
      const params = {
        id: this.id,
      };
      fetchPlayerDetailData(params)
        .then((res) => {
          this.detailInfo = res?.data || {};
          this.detailInfo.position = res?.data?.position
            ? String(res?.data?.position)
            : "";
          this.$refs.detailInfoFormRef.clearValidate();
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.detailInfo = this.$options.data().detailInfo;
          this.$refs.detailInfoFormRef.clearValidate();
          this.loading = false;
        });
    },
    /**
     * 请求新增
     */
    requestPlayerAdd() {
      const params = { ...this.detailInfo };
      this.loading = true;
      fetchPlayerAdd(params)
        .then((res) => {
          if (res?.code === 1 && res?.data) {
            this.$message.success("新增成功！");
            this.$router.push({ name: "player-list" });
          }
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    /**
     * 请求编辑
     */
    requestPlayerEdit() {
      const params = { ...this.detailInfo };
      params.id = this.id;
      this.loading = true;
      fetchPlayerEdit(params)
        .then((res) => {
          if (res?.code === 1 && res?.data) {
            this.$message.success("更新成功！");
            this.$router.push({ name: "player-list" });
          }
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped>
.custom-input {
  width: 240px;
}
</style>
